<!DOCTYPE html>
<html lang = "zh-CN">
    <head>
        <meta charset = "utf-8">
        <meta content = "IE=edge" http-equiv = "X-UA-Compatible">
        <meta content = "width=device-width, initial-scale=1" name = "viewport">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>小政的解析抖音小视频</title>
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src = "./js/jquery-3.3.1.min.js"></script>
        <!--<script src="./js/clipboard.min.js"></script>-->
        <!-- Bootstrap -->
        <link href = "./css/bootstrap.min.css" rel = "stylesheet">
        <!-- JSON Viewer -->
        <link href = "/static/css/campaign/jquery.json-viewer.css" rel = "stylesheet">
        <!-- JSON viewer -->
        <script src = "/static/js/campaign/jquery.json-viewer.js"></script>
        <style type = "text/css">
            .centered {
                width: 920px;
                margin: 100px auto;
            }

            #result, #SaveResult {
                font-size: 12px;
                max-width: 920px;
            }

            .video-div {
                margin-top: 150px;
            }

            pre {
                outline: 1px solid #ccc;
                padding: 5px;
                margin: 5px;
            }

            /*字符串的样式*/
            .string {
                color: green;
            }

            /*数字的样式*/
            .number {
                color: darkorange;
            }

            /*布尔型数据的样式*/
            .boolean {
                color: blue;
            }

            /*null值的样式*/
            .null {
                color: magenta;
            }

            /*key值的样式*/
            .key {
                color: red;
            }

        </style>
        <!--(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]-->
        <script>
            $(function () {
                /*$("#inputUrl").one('blur',function(){
                    //使用one方法，失焦bai事件执行du一次，第二次失焦不会执行
                    var pattern = /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#\/%?=~_|!:,.;]+[-A-Za-z0-9+&@#\/%=~_|]$/;
                    let test = pattern.exec($("#inputUrl").val());
                    $("#inputUrl").val(test);
                })*/
                $("#inputUrl").blur(function () {
                    var pattern = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/,
                        str = $("#inputUrl").val();
                    console.log(pattern.exec(str)[0]);
                    $("#inputUrl").val(pattern.exec(str)[0]);
                });
                $("#VideoUrl").blur(function () {
                    var pattern = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/,
                        str = $("#VideoUrl").val();
                    console.log(pattern.exec(str)[0]);
                    $("#VideoUrl").val(pattern.exec(str)[0]);
                });
                //1.给登录按钮绑定单击事件
                $("#bt_sub").click(function () {
                    //2.发送agax请求，提交表单数据
                    $.post("resolve", $("#resolve").serialize(), function (data) {
                        //3.处理数据
                        alert("解析完成！！");
                        console.log(data)
                        let input = eval('(' + data + ')');
                        // $('#original').val(JSON.stringify(input, null, 4));
                        $('#result').html(syntaxHighlight(JSON.stringify(input, null, 4)));
                        // $("#bt_open").attr("onclick","location.href=('"+data+"')");
                        // $("#bt_open").css("display","block");
                    });
                });

                $("#download").click(function () {
                    //2.发送agax请求，提交表单数据
                    $.post("download", $("#downloadVideo").serialize(), function (data) {
                        //3.处理数据
                        alert("解析完成！！");
                        let input = eval('(' + data + ')');
                        $('#SaveResult').html(syntaxHighlight(JSON.stringify(input, null, 4)));
                    });
                });
            });

            function syntaxHighlight(json) {
                if (typeof json != 'string') {
                    json = JSON.stringify(json, undefined, 2);
                }
                json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
                    function (match) {
                        var cls = 'number';
                        if (/^"/.test(match)) {
                            if (/:$/.test(match)) {
                                cls = 'key';
                            } else {
                                cls = 'string';
                            }
                        } else if (/true|false/.test(match)) {
                            cls = 'boolean';
                        } else if (/null/.test(match)) {
                            cls = 'null';
                        }
                        return '<span class="' + cls + '">' + match + '</span>';
                    }
                );
            }
        </script>
        <!--<script>
            var clipboard = new ClipboardJS('#bt_open');
            clipboard.on('success', function(e) {
                alert("已复制！！")
                console.info('Trigger:', e.trigger);
                e.clearSelection();
            });

            clipboard.on('error', function(e) {
                alert("异常错注:" +JSON.stringify(e));
            });
        </script>-->
    </head>
    <body>
        <div class = "centered">
            <div>
                <form action = "" id = "resolve" method = "post">
                    <div class = "form-group">
                        <label for = "url">输入抖音url</label>
                        <input class = "form-control" id = "url" name = "url" type = "url">
                    </div>
                    <div class = "form-group">
                        <label for = "cookie">Cookie：</label>
                        <input class = "form-control" id = "cookie" name = "cookie" type = "text">
                        <!--<textarea style="white-space:nowrap; overflow:scroll;"  name="cookie" id="cookie" cols=""></textarea>-->
                    </div>

                    <div class = "form-group">
                        <button class = "btn btn-primary" id = "bt_sub" type = "button">开始解析</button>
                    </div>
                </form>
                <div>
                    <span class = "">解析后的Url地址：</span><br>
                    <!--<textarea class="form-control" id="original" rows="20" placeholder="Please input JSON data here ..." style="white-space:nowrap; overflow:scroll;"></textarea>-->
                    <pre id = "result"></pre>
                </div>

            </div>

            <div class = "video-div">
                <form action = "" id = "downloadVideo" method = "post">
                    <div class = "form-group">
                        <label for = "VideoUrl">视频url</label>
                        <input class = "form-control" id = "VideoUrl" name = "videoUrl" type = "url">
                    </div>
                    <div class = "form-group">
                        <label for = "FileName">文件名称：</label>
                        <input class = "form-control" id = "FileName" name = "fileName" type = "text">
                    </div>

                    <div class = "form-group">
                        <button class = "btn btn-primary" id = "download" type = "button">开始下载</button>
                    </div>
                </form>

                <div>
                    <span class = "">解析后的Url地址：</span><br>
                    <pre id = "SaveResult"></pre>
                </div>
            </div>
        </div>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src = "./js/bootstrap.min.js"></script>
    </body>
</html>